<template>
  <div class="photoList">
    <div id="slider" class="mui-slider">
      <div
        id="sliderSegmentedControl"
        class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
      >
        <div class="mui-scroll">
          <a
            :class="['mui-control-item',item.id==0?'mui-active':'']"
            href="#item1mobile"
            data-wid="tab-top-subpage-1.html"
            v-for="item in picMsg"
            :key="item.id"
          >{{item.picTitle}}</a>
        </div>
      </div>
    </div>
    <ul>
      <router-link to="/home/photoInfo" v-for="item in picMsg" :key="item.id" tag="li">
        <img v-lazy="item.picUrl">
        <div class="photoTitle">{{item.picTxt}}</div>
      </router-link>
    </ul>
  </div>
</template>
<script>
import mui from "../../lib/mui/dist/js/mui.min.js";

export default {
  data() {
    return {
      picMsg: [
        {
          id: 0,
          picTitle: "宝马",
          picUrl:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1546159361,3666829642&fm=15&gp=0.jpg",
          picTxt:
            "宝马(BMW)是享誉世界的豪华汽车品牌。宝马的车系有1、2、3、4、5、6、7、i、X、Z等几个系列，还有在各系基础上进行改进的M系（宝马官方的高性能改装部门）。宝马公司创建于1916年，总部设在德国巴伐利亚州慕尼黑。BMW的蓝白标志宝马总部所在地巴伐利亚州州旗的颜色。百年来，宝马汽车由最初的一家飞机引擎生产厂发展成为以高级轿车为主导，并生产享誉全球的飞机引擎、越野车和摩托车的企业集团，名列世界汽车公司前列。其全称为Bavarian Motor Work。"
        },
        {
          id: 1,
          picTitle: "奔驰",
          picUrl:
            "http://img5.imgtn.bdimg.com/it/u=512187610,3284151955&fm=26&gp=0.jpg",
          picTxt:
            "奔驰，德国百年汽车品牌，汽车文明的先驱者与引领者，被认为是最成功的高档汽车品牌之一，其登峰造极的技术水平、精湛过硬的质量标准、推陈出新的创新能力、以及一系列经典轿跑车款式令人称道。"
        },
        {
          id: 2,
          picTitle: "奥迪",
          picUrl:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=177711896,2858173344&fm=26&gp=0.jpg",
          picTxt:
            "奥迪（Audi）是德国大众汽车集团子公司奥迪汽车公司旗下的豪华汽车品牌，作为高技术水平、质量标准、创新能力、以及经典车型款式的代表，奥迪是汽车品牌之一。公司总部设在德国的英戈尔施塔特，并在中国等许多国家有分公司。"
        },
        {
          id: 3,
          picTitle: "沃尔沃",
          picUrl:
            "https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=6c1810b258fbb2fb2b2b5e127f482043/a044ad345982b2b7e554212b3cadcbef77099b11.jpg",
          picTxt:
            "沃尔沃，瑞典豪华汽车品牌。豪华意味着对时间的积淀，空间的卓越，以及专一的执着。将北欧豪华精神注入其中，在看得见的科技配备下，挖掘出看不见的豪华本质。"
        },
        {
          id: 4,
          picTitle: "大众",
          picUrl:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1303451198,1483726813&fm=26&gp=0.jpg",
          picTxt:
            "希特勒在1936年曾提出一个设想，要生产一种廉价的“大众汽车”，他说，每个德国人，至少是每个德国职工，都应该有一辆自己的汽车，就像美国一样。美国当时每五人有一辆汽车，德国每50人才有一辆汽车，职工上下班都是骑自行车或乘公共汽车。希特勒下令要为普通人生产一种只卖990马克的经济型汽车。他亲自过问由工程师保时捷（波尔舍）主持的设计工作。私营企业生产不出这么便宜的车，就由纳粹组织的“劳工阵线”来负责。1937年3月28日，“Gesellschaft zur Vorbereitung des Deutschen Volkswagens mbH”公司宣告成立，随后于1938年9月16日更名为“Volkswagenwerk GmbH”。1938年在今沃尔夫斯堡，大众汽车公司开始建厂，是当时世界最大的汽车厂。计划年产150万辆，用以生产由斐迪南保时捷设计的新款车型，产量超过美国最大的福特汽车公司。"
        },
        {
          id: 5,
          picTitle: "马自达",
          picUrl:
            "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2165942995,247377128&fm=26&gp=0.jpg",
          picTxt:
            "马自达（MAZDA），是一家日本汽车制造商，总部设在日本广岛，主要销售市场包括亚洲、欧洲和北美洲。MAZDA是日本最著名的汽车品牌之一，日本第四大汽车制造商，是世界著名汽车品牌，是世界上唯一研发和生产转子发动机的汽车公司。2008年《财富》全球500强企业排名中名列第二百五十五位。"
        },
        {
          id: 6,
          picTitle: "长安",
          picUrl:
            "https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=7a04acb0f01f4134ff37037e151f95c1/c995d143ad4bd113afea866157afa40f4bfb05b9.jpg",
          picTxt:
            "长安汽车是中国知名汽车制造企业,中国品牌汽车领导者,是第一家中国品牌汽车产销累计突破1000万辆的车企,连续10年实现中国品牌汽车销量第一；拥有CS系列、睿骋、逸动、悦翔、奔奔等知名汽车品牌."
        },
        {
          id: 7,
          picTitle: "五菱宏光",
          picUrl:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1306989876,2188224544&fm=26&gp=0.jpg",
          picTxt:
            "五菱宏光是上汽通用五菱推出的第一款介于商用车和乘用车的跨界自主研发产品。该产品以流畅的外形设计，多样化、实用性的宽敞驾乘空间。五菱宏光在动力性和经济性的完美平衡，以及在操控性和安全性上的实力表现，颠覆了人们对商务车的传统印象。五菱宏光以其小排量、巧妙设计、精致内饰、强有力的跨级动力，以及4.48~6.68万元的绝对诱人的售价，在大块头云集的商务车市场开创了一片新天地。“小巧、精细、实用”是业内人士对五菱宏光的一致评价。"
        },
        {
          id: 8,
          picTitle: "奥拓",
          picUrl:
            "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3875242984,791080415&fm=26&gp=0.jpg",
          picTxt:
            "奥拓（Alto）是中国长安铃木公司旗下一款经济新轿车品牌。上世纪90年代初，国内共有4家军工企业（即重庆长安奥拓、湖南江南奥拓、吉林江北奥拓、西安秦川奥拓）获得日本铃木技术的奥拓（Alto）车型的相关技术及生产设备，自主生产奥拓车型。"
        },
        {
          id: 9,
          picTitle: "JEEP",
          picUrl:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3692640174,3937256687&fm=26&gp=0.jpg",
          picTxt:
            "Jeep全系热卖车型尊享0利率金融方案，诚邀您进入官网了解金融方案详情以及车主服务!Jeep，用与生俱来的专业与情怀，带领我们走进那些未曾踏足的风景!"
        }
      ]
    };
  },
  mounted() {
    mui(".mui-scroll-wrapper").scroll({
      deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
  },
  methods: {}
};
</script>
<style lang="less" scoped>
* {
  touch-action: pan-y;
}
.photoList {
  ul {
    padding: 0;
    padding-bottom: 50px;
    margin: 0;
    li {
      // background-color: #ccc;
      text-align: center;
      padding: 8px;
      position: relative;
      img[lazy="loading"] {
        width: 40px;
        height: 300px;
        margin: auto;
        vertical-align: middle;
      }
      .photoTitle{
        text-align: left;
        font-size: 12px;
        line-height: 20px;
        position: absolute;
        bottom: 13px;
        text-indent: 2em;
        max-height: 50px;
        background: rgba(0,0,0,0.3);
        color: white;
      }
    }
  }
}
</style>
